<template>

  姓名：{{ name }}
  年龄：{{ age }}
工作：{{ job.type }}
  <button @click="update">改数据</button>
</template>

<script>
import { ref } from 'vue';
export default {
  name: 'App',
  components: {
  },
  //  setup函数
  setup(props) {
//  普通数据 vue 检测不到  数据变化
    //  let name='zs'
    //  let age=18
    //  ref  vue 才能检测到 才能完成响应式
    let name=ref('zs')
     let age=ref(18)
    //  负责的对象  job.value 取到的是{type:'前端'} 响应式的对象 proxy job.value.type 
    // 不用 .value  (和reactive 一样)
     let job =ref({
      type:'前端'
     })

     function update() {
      // 函数作用域取值  向上取
      console.log('update');
      console.log(name,age);  //引用实现的实例对象  引用对象 
      // vue2 ref objectdefeng set get  数据劫持 
      name.value='ls'
      age.value=10
      // ref都要点value  第二层是proxy 不用点value 
      job.value.type='ui'
     }

   
    return {name,age,update,job}

  }
}
</script>

<style>

</style>
